<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的插槽(slot)</title>
    <script src="../vue.js"></script>
   
</head>
<body>
    <div id="root">
        <child>
            <template slot- scope="props">
                <li>
                    {{props.item}}
                </li>
            </template>
        </child>
    </div>   
    
    <script>
       
        Vue.component('child',{
            data: function(){
                return {
                    list: [1,2,3,4]
                }
            },
            //  li  外部告诉我们应该怎么渲染
            // template:`<div>
            //            <ul>
            //                 <li v-for=“item of list”>
            //                     {{item}}
            //                 </li>
            //             </ul>              
            //           </div>`
            template: `
                <div>
                    <ul>
                        <slot 
                            v-for=“item of list”
                            :item=item
                        >
                                {{item}}
                        </slot>
                    </ul>              
                </div>
            
                      `
        })
        
        //  父组件向子组件传递dom  元素
        var root = new Vue({
            el: '#root',            
           
        });

    
        
    </script>
</body>
</html>